<!-- 脚本提示 -->
<template>
  <div>
      <el-dialog   :modelValue="dialogVisible"  title="命令选择"  width="50%"
                  :close-on-click-modal="false" :close-on-press-escape="false"
                  :show-close="false" >

          <el-table :data="cmdTips" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column prop="cmd" label="命令描述" />
            <el-table-column prop="tip" label="命令提示" />
          </el-table>

        <template #footer>
          <div style="display: flex; flex-direction: row-reverse; ">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleOk"  style="margin: 0 10px 0 10px;" >确定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";
import request from '@/utils/drawutils/request'
import axios from 'axios';

async function loadCmdTipdat() {
  try {
    //const response = await axios.get('/drawapp/json/cmdtip.json');
    const response = require('@/assets/json/cmdtip.json');
    // console.log('加载命令配置成功:', response);
    //return response.data;
    return response;
  } catch (error) {
    console.error('加载命令配置失败:', error);
    return [];
  }
}

export default {
  name: "DlgSelectCmdTip",
  props:{ dialogVisible: Boolean },
  components:{},
  emits:[ "resSelect" ],

  mounted() {

  },
  computed:{

  },
  data(){
    return{
      cmdTips: [],         
      currentTip: null, 
    }
  },
  watch: {

  },
  methods:{
    async init(  ){
      let v = await loadCmdTipdat()
      this.cmdTips = v.cmdtip;
      // console.log( "cmdTips: ", this.cmdTips )
    },  

    handleOk(  ){
      if(this.currentTip) {
        this.$emit("resSelect", 1, this.currentTip.cmd)
      } else {
        ElMessage.warning('请先选择一个命令提示')
      }
    },

    handleCancel(){
      this.$emit("resSelect", 0)
    },

    handleCurrentChange(val) {
      this.currentTip = val;
    },
  },  // end of methods

}

</script>

<style  lang="less" scoped >
::v-deep(.el-table) {
  font-size: 14px; /* 设置表格字体大小 */
    /* 奇数行背景色 */
    .el-table__row:nth-child(odd) {
    background-color: #a8a8a8; /* 浅灰色 */
  }
  
  /* 偶数行背景色 */
  .el-table__row:nth-child(even) {
    background-color: #ffffff; /* 白色 */
  }
}

::v-deep(.el-table__body tr.current-row > td) {
  background-color: rgb(0, 148, 68) !important;
}

::v-deep( tbody tr:hover > td ){
  background-color: transparent !important;
}

</style>